<!DOCTYPE html>
<html lang="zh">
<head>
    <include file="news/news_style" title="PinPaper"/>
</head>
<body class="navbar-fixed">

<!-- header -->
<include file="index/header" menu_display="none" search_action="/"/>
<!-- / header -->

<section id="content">
    <section class="main padder">
        <div class="row">
            <!--内容主体 start-->
            <div class="col-lg-12">
                <div class="col-lg-8 col-offset-2">
                    <div class="">
                        <h2 class="title text-center">{$title}</h2>
                        <div class="m-b m-t text-muted text-center">
                            <i class="icon-user"></i> by <span class="m-r-sm">{$publisher==''?'佚名':$publisher}</span>
                            &nbsp;

                            <if condition="$relink.resource neq ''">
                                <i class="icon-link"></i> 转自 <a class="m-r-sm" target="_blank" href="{$relink.relink}">{$relink.resource}</a>
                                &nbsp;
                            </if>

                            <i class="icon-tag"></i> {$name}
                            &nbsp;
                            <i class="icon-time"></i> {$pubtime}
                            &nbsp;
                            <a class="m-l-sm js-goto" href="#comment"><i class="icon-comments-alt"></i>{$comments}</a>
                            &nbsp;
                            <a id="like" class="{$islike?'active':''}" data-nid="{$nid}" data-action="like" data-toggle="class" href="">
                                <i class="icon-heart-empty text"></i>
                                <i class="icon-heart text-danger text-active"></i>
                            </a><span id="like-num">{$likes}</span>
                        </div>
                        <div class="m-b m-t line line-lg"></div>
                        <div class="content">
                            {$content}
                        </div>
                        <div class="line line-lg" id="comment"></div>
                        <!-- 多说评论框 start -->
                        <div class="ds-thread" data-thread-key="{$nid}" data-title="{$title}" data-url="{:U('/Home/news/read/'.$nid)}"></div>
                        <!-- 多说评论框 end -->
                        <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
                        <script type="text/javascript">
                            var duoshuoQuery = {short_name:"8akarei"};
                            (function() {
                                var ds = document.createElement('script');
                                ds.type = 'text/javascript';ds.async = true;
                                ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
                                ds.charset = 'UTF-8';
                                (document.getElementsByTagName('head')[0]
                                || document.getElementsByTagName('body')[0]).appendChild(ds);
                            })();
                        </script>
                        <!-- 多说公共JS代码 end -->
                        <div class="line line-lg"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</section>


<!-- footer -->
<include file="index/footer"/>
<!-- / footer -->

<!-- Page Info -->
<input type="hidden" name="nid" id="nid" value="{$nid}">
<input type="hidden" name="tid" id="tid" value="{$topic}">

<script src="__PUBLIC__/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="__PUBLIC__/js/bootstrap.js"></script>
<!-- parsley -->
<script src="__PUBLIC__/js/parsley/parsley.min.js"></script>
<!-- Masonry -->
<script src="__PUBLIC__/plugin/masonry.pkgd.min.js"></script>
<!-- Imagesloaded -->
<script src="__PUBLIC__/plugin/imagesloaded.pkgd.min.js"></script>
<!-- Classie -->
<script src="__PUBLIC__/plugin/classie.js"></script>
<!-- Wookmark -->
<script src="__PUBLIC__/plugin/wookmark.min.js"></script>
<script src="__PUBLIC__/plugin/cbpGridGallery.js"></script>
<!-- Layer -->
<script src="__PUBLIC__/js/layer/layer.js"></script>

<!-- app -->
<script src="__PUBLIC__/js/app.js"></script>
<script src="__PUBLIC__/js/app.plugin.js"></script>
<script src="__PUBLIC__/js/app.data.js"></script>

<!-- Page Script -->
<script>

    //登陆弹出层
    var sign_in_layer_conf = {
        id:'sign_in_layer',
        type: 1,
        closeBtn: 0,
        scrollbar: 0,
        move: false,
        shadeClose: false,
        title: false,
        shade: [0.65, '#000'],
        content: "<section class=\"panel\" style='margin-bottom:0px'>" +
        "<header class=\"panel-heading text-center\"><h4 class='inline text-muted text-center'>登陆PinPaper</h4></header>" +
        "<form class=\"padder\" id='signIn_form' data-validate=\"parsley\">" +
        "<div class=\"block\"><label class=\"control-label text-muted\">邮箱</label>" +
        "<input type=\"email\" name='email' class=\"form-control parsley\" id='signInEmail' placeholder=\"test@example.com\" data-trigger='focusout' data-type='email' data-required='true'></div>" +
        "<div class=\"block\"><label class=\"control-label text-muted\">密码</label>" +
        "<input type=\"password\" name='password' class=\"form-control parsley\" placeholder=\"Password\" data-error-message='请输入密码' data-required='true'></div>" +
        "<div class=\"alert alert-warning message-alert-box\" style=\"display: none\">" +
        "<i class=\"icon-bell-alt\"></i><strong><span class=\"message-alert\"></span></strong>" +
        "</div><div class=\"alert alert-success message-success-box\" style=\"display: none\">" +
        "<i class=\"icon-ok-sign icon-large\"></i><strong><span class=\"message-success\"></span></strong></div>" +
        "<div class=\"line line-dashed\"></div>" +
        "<p class=\"text-muted text-center\"><small>没有账号? <a href='javascript:void(0);' id='signUp'> 请注册</a></small></p>" +
        "<a class=\"btn btn-white btn-block\" id='signInSubmit' href=\"javascript:void(0);\">登陆</a></form></section>"
    };

    //注册弹出层
    var sign_up_layer_conf = {
        id:'sign_up_layer',
        type: 1,
        closeBtn: 0,
        scrollbar: 0,
        move: false,
        shadeClose: false,
        title: false,
        shade: [0.65, '#000'],
        content: "<section class=\"panel\" style='margin-bottom:0px'>" +
        "<header class=\"panel-heading text-center\"><h4 class='inline text-muted text-center'>注册PinPaper</h4></header>" +
        "<form class=\"padder\" id='sign_form' data-validate=\"parsley\">" +
        "<div class=\"block\">" +
        "<label class=\"control-label text-muted\">昵称</label>" +
        "<input type=\"text\" name='username' class=\"form-control parsley\" placeholder=\"Nickname\" data-trigger='keyup' data-maxlength=\"15\" data-required=\"true\">" +
        "</div>" +
        "<div class=\"block\"><label class=\"control-label text-muted\">邮箱</label>" +
        "<input type=\"email\" name='email' class=\"form-control parsley\" id='signUpEmail' placeholder=\"test@example.com\" data-remote=\"{:U('/Home/User/testMail')}\" data-remote-method='POST' data-trigger='focusout' data-type='email' data-required='true'></div>" +
        "<div class=\"block\"><label class=\"control-label text-muted\">密码</label>" +
        "<input type=\"password\" name='password' class=\"form-control parsley\" placeholder=\"Password\" data-rangelength='[6,15]' data-trigger='keyup' data-error-message='密码长度为6-15个字符' data-required='true' id=\"inputPassword\"></div>" +
        "<div class=\"alert alert-warning message-alert-box\" style=\"display: none\">" +
        "<i class=\"icon-bell-alt\"></i><strong><span class=\"message-alert\"></span></strong>" +
        "</div><div class=\"alert alert-success message-success-box\" style=\"display: none\">" +
        "<i class=\"icon-ok-sign icon-large\"></i><strong><span class=\"message-success\"></span></strong></div>" +
        "<div class=\"line line-dashed\"></div>" +
        "<p class=\"text-muted text-center\"><small>已有账号? <a href='javascript:void(0);' id='signIn'> 请登陆</a></small></p><a class=\"btn btn-white btn-block\" id='signSubmit' href=\"javascript:void(0);\">开始</a></form></section>"
    };

    //订阅弹出层
    var subscribe_layer_conf = {
        id:'subscribe_layer',
        type: 2,
        closeBtn: 0,
        scrollbar: 0,
        move: false,
        shadeClose: false,
        title: false,
        area: ['400px','400px'],
        shade: [0.65, '#000'],
        loading:3,
        content: "{:U('/Home/Index/subscribeIframe')}"
    };


    (function ($) {
        var islogin = GetCookieValue('islogin');
        if(!islogin) {
            layer.closeAll();
            layer.open(sign_in_layer_conf);
        }

        if (islogin) {
            var tid = $("#tid").val();
            //记录浏览超过45秒的文章
            setTimeout(function () {
                if(GetCookieValue('track')){
                    var track = $.parseJSON(GetCookieValue('track'));
                    var have = false;
                    for (var i in track) {
                        if(i == tid){
                            track[i]++;
                            have = true;
                            break;
                        }
                    }
                    if(!have){
                        var arr = [];
                        arr[tid] = 1;
                        for(var i in arr)
                        {
                            track[i]=arr[i];
                        }
                    }
                    var t = JSON.stringify(track);
                    SetCookieValue('track', t, 7);
                }else {
                    var arr = [];
                    arr[tid] = 1;
                    var json = {};
                    for(var i in arr)
                    {
                        json[i]=arr[i];
                    }
                    var t = JSON.stringify(json);
                    SetCookieValue('track', t, 7);
                }
            }, 45000);
        }

    })(jQuery);


    $(document).on("click", '.js-goto', function () {
        $('body,html').animate({
            'scrollTop': $($(this).attr("href")).offset().top
        });
    });


    $(document).on("click", '#like', function () {
        var nid = $("#like").attr('data-nid');
        var action = 'like';
        if(classie.hasClass(document.getElementById('like'), 'active')){
            action = 'unlike';
        }
        like(nid, action);
    });


    $("#signIn").die().live("click", function(){
        layer.closeAll();
        layer.open(sign_in_layer_conf);
    });

    $('#signUp').die().live("click", function () {
        layer.closeAll();
        layer.open(sign_up_layer_conf);
    });

    //登陆表单点击事件
    $('#signInSubmit').die().live("click", function () {

        //表单验证
        var checked = $('#signIn_form').parsley('validate');

        if(checked){
            var data = $("#signIn_form").serialize();
            $.ajax({
                'type': 'post',
                'data': data,
                'url': "{:U('/Home/User/signIn')}",
                'dataType': 'json',
                success: function (data) {
                    if (data.code == '1') {
                        $(".message-alert-box").hide();
                        $(".message-success").text(data.message);
                        $(".message-success-box").fadeIn();
                        setTimeout(function(){
                            window.location.href = '/';
                        },800);
                    } else {
                        $(".message-alert").text(data.message);
                        $(".message-alert-box").fadeIn();
                        $(".message-alert-box").fadeOut(2000);
                    }
                },
                error: function (e) {
                    $(".message-alert").text('服务器繁忙');
                    $(".message-alert-box").fadeIn();
                    $(".message-alert-box").fadeOut(3000);
                }
            });
        }
    });

    //注册表单点击事件
    $('#signSubmit').die().live("click", function () {

        //表单验证
        var checked = $('#sign_form').parsley('validate');

        if(checked){
            var data = $("#sign_form").serialize();
            $.ajax({
                'type': 'post',
                'data': data,
                'url': "{:U('/Home/User/signUp')}",
                'dataType': 'json',
                success: function (data) {
                    if (data.code == '1') {
                        $(".message-alert-box").hide();
                        $(".message-success").text("注册成功,激活邮件已发送,请在1小时内激活哦.");
                        $(".message-success-box").fadeIn();
                        layer.closeAll();
                        layer.open(subscribe_layer_conf);
                    } else {
                        $(".message-alert").text(data.message);
                        $(".message-alert-box").fadeIn();
                        $(".message-alert-box").fadeOut(2500);
                    }
                },
                error: function (e) {
                    $(".message-alert").text('服务器繁忙');
                    $(".message-alert-box").fadeIn();
                    $(".message-alert-box").fadeOut(3000);
                }
            });
        }
    });


    function like(nid, action){
        var like_num = $('#like-num').html();
        $.ajax({
            'type': 'post',
            'data': {'nid':nid, 'action':action},
            'url': "{:U('/Home/Index/like')}",
            'dataType': 'json',
            success: function (data) {
                if (data.code == '1') {
                    if(action == 'like'){
                        like_num++;
                        $("#like-num").html(like_num);
                    }else {
                        like_num--;
                        $("#like-num").html(like_num);
                    }
                }
            }
        });
    }

</script>

</body>
</html>